.wrapper>.main-body{
  /* height: 2000px; */
  margin-top: 122px; 
  /* 106是header的高度 */
  /* font-size: 30px; */
}


/* 商店主标题栏 */
.main-body>img.headline{
  width: 1000px;
  /* margin:0px 0 4px 0; */
}

/* 商店页轮播*/
.main-body>.banner-carousel{
  width: 1000px;
  height: 490px;
  position: relative;
  overflow: hidden;
  /* border: 1px solid red; */
}

.main-body>.banner-carousel ul.banner-img{
  position:absolute;
  left:0;
}

.main-body>.banner-carousel ul.banner-img li{
  float:left;
  width:1000px;
}

/* 轮播竖边条 */
.main-body>.banner-carousel .edging{
  height: 476px;
  width: 130px;
  position: absolute;
  z-index: 1;
  top: 0;
  line-height: 476px;
  text-align: center;
}

.main-body>.banner-carousel .right-edging{
  right: 0;
}

/* 鼠标经过竖边条 */
.main-body>.banner-carousel .left-edging:hover .arr-left{
  background-color: rgba(0, 0, 0,.4);
}

.main-body>.banner-carousel .right-edging:hover .arr-right{
  background-color: rgba(0, 0, 0,.4);
}

.main-body>.banner-carousel .edging .arr-slide{
  border-radius: 50%;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px
}

/* 轮播指示器 */
.main-body>.banner-carousel>ul.indicators{
  margin: 486px auto 0;
  display: flex;
  justify-content: center;
}

.main-body>.banner-carousel>ul.indicators li{
  width: 20px;
  height: 4px;
  background-color: #e8e8e8;
  margin:0 3px;
  cursor: pointer;
}

.main-body>.banner-carousel>ul.indicators .active{
  background-color: #45494D;
}

/* 分类列表 */
.main-body .category-list{
  display: flex;
  flex-flow: row wrap;
  margin:20px 0 20px 0;
  /* border: 1px solid green; */
}

.main-body .category-list>li{
  width: 84px;
  height: 36px;
  border-bottom: 1px solid #eee;
}

.main-body .category-list li a{
  display: inline-block;
  width: 64px;
  line-height: 36px;
  text-align: center;
  font-size: 13px;
}

.main-body .category-list>li:not(:nth-child(11))>a:hover{
  border-bottom: 1px solid black;
}

.main-body .category-list>li:first-child a{
  background: url(../img/shop/n.png) no-repeat 2px;
  text-align: right;
}

/* 分类列表下拉菜单————价格筛选 */
.main-body .category-list li.dropdown{
  width: 156px;
  height: 36px;
  /* border:1px solid blue; */
  text-align: right;
  position: relative;
}
.main-body .category-list li.dropdown span{
  display: inline-block;
  font-size: 13px;
  line-height: 36px;
}


.main-body .category-list li.dropdown span img{
  vertical-align: baseline;
  transition: 0.5s;
}

.main-body .category-list li.dropdown span:hover img{
  transform: rotate(180deg);
}

.main-body .category-list li.dropdown span:hover+ul.dropdown-menu{
  display: block;
}

.main-body .category-list li.dropdown ul.dropdown-menu{
  background-color: white;
  border: 1px solid #eee;
  position: absolute;
  z-index: 2;
  top: 36px;
  right: 0;
  width: 95px;
  text-align: center;
  display: none;
}

.main-body .category-list li.dropdown ul.dropdown-menu:hover{
  display: block;
}

.main-body .category-list li.dropdown ul.dropdown-menu li{
  border-bottom: 1px solid #eee;
}

.main-body .category-list li.dropdown ul.dropdown-menu li:last-child{
  border-bottom: 0;
}

.main-body .category-list li.dropdown ul.dropdown-menu li a{
  width: 95px;
  height: 40px;
  line-height: 40px;
  /* border: 1px solid red; */
}

.main-body .category-list li.dropdown ul.dropdown-menu li a:hover{
  background-color: black;
  color: white;
}



/* 商品列表 */
.main-body .wares{
  width: 1000px;
  box-sizing: padding-box;
  grid-auto-flow: row;
  grid-gap: 20px;
  /* background-color: beige; */
  display: grid;
  grid-template-rows:[r1] 235px [r2] 235px [r3] 235px [r4] 235px [r5] 235px [r6] 235px [r7] 235px [r8] 235px [r9] 235px [r10] 235px [r11]; 
  grid-template-columns: [c1] 235px[c2] 235px[c3] 235px[c4] 235px [c5];
}

.main-body .wares div{
  /* border: 1px solid red; */
  width: 233px;
  height: 233px;
}

.main-body .wares .ware-big1{
  grid-area: r1/c1/r3/c3;
}

.main-body .wares .ware-big2{
  grid-area: r3/c3/r5/c5;
}

.main-body .wares .ware-big3{
  grid-area: r5 /c1 /r7 /c3;
}

.main-body .wares .ware-big4{
  grid-area: r7 /c3 /r9 /c5;
}

.main-body .wares .ware-big5{
  grid-area: r9 /c1 /r11 /c3;
}

/* 给每个大格子设置样式 */
.main-body .wares .ware-big img{
  width: 490px;
  height: 490px;
}

.main-body .wares .ware-big a.ware-link{
  position: relative;
  display: block;
}

/* 商品遮罩 */
.main-body .wares .ware-big .mask{
  width: 490px;
  height: 490px;
  box-sizing: border-box;
  padding: 15px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  opacity: 0;
  color: white;
}

.main-body .wares .ware-big .mask:hover{
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.7);
}

.main-body .wares .ware-big .mask p{
  height: 25px;
  width: 66%;
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  font-weight: bold;
  line-height: 20px;

}

.main-body .wares .ware-big .mask p.brand{
  height: 42px;
  line-height: 42px;
  font-size: 14px;
  margin-top: 134px;
}

.main-body .wares .ware-big .mask p.brand img{
  width: 42px;
  height: 42px;
  margin-right:10px; 
}

.main-body .wares .ware-big .mask p.price{
  color: #0c6eba;
  font-size: 20px;
  font-style: italic;
  margin-top: 23px;
}

.main-body .wares .ware-big .mask p.title{
  margin: 14px auto 5px;
  font-size: 14px;
  white-space: nowrap;
}

.main-body .wares .ware-big .mask p.subtitle{
  height: 60px;
  font-weight: 100;
}

/* ================================= */
/* 小格子商品 */
/* ================================= */
.main-body .wares>div:not(.ware-big) img{
  width: 235px;
  height: 235px;
}

.main-body .wares>div:not(.ware-big) a.ware-link{
  position: relative;
  display: block;
}

/* 商品遮罩 */
.main-body .wares>div:not(.ware-big) .mask{
  width: 235px;
  height: 235px;
  box-sizing: border-box;
  padding: 15px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  opacity: 0;
  color: white;
}

.main-body .wares>div:not(.ware-big) .mask:hover{
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.7);
}

.main-body .wares>div:not(.ware-big) .mask p{
  height: 25px;
  width: 85%;
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  font-weight: bold;
  line-height: 20px;

}

.main-body .wares>div:not(.ware-big) .mask p.brand{
  height: 42px;
  line-height: 42px;
  font-size: 14px;
  margin-top: 24px;
}

.main-body .wares>div:not(.ware-big) .mask p.brand img{
  width: 42px;
  height: 42px;
  margin-right:10px; 
}

.main-body .wares>div:not(.ware-big) .mask p.price{
  color: #0c6eba;
  font-size: 20px;
  font-style: italic;
  margin-top: 14px;
}

.main-body .wares>div:not(.ware-big) .mask p.title{
  margin: 14px auto 5px;
  font-size: 14px;
  white-space: nowrap;
}

.main-body .wares>div:not(.ware-big) .mask p.subtitle{
  height: 42px;
  font-weight: 100;
}
